<template>
	<view class="pageContainer" :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		<view class="bold my-e0p5 fontSize-lg indent">
			grid
		</view>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>width</view>
				<view>String</view>
				<view>无</view>
				<view>宫格外框宽度</view>
			</view>
			<view class="tr">
				<view>height</view>
				<view>String</view>
				<view>无</view>
				<view>宫格外框高度</view>
			</view>
			<view class="tr">
				<view>xCount</view>
				<view>Number</view>
				<view>1</view>
				<view>列数</view>
			</view>
			<view class="tr">
				<view>yCount</view>
				<view>Number</view>
				<view>无</view>
				<view>行数，非必须</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>xSize</view>
					<view>Array,String</view>
					<view>无</view>
					<view>列宽，区分不同格式：</view>
				</view>
				<view class="appendix">
					<view>100px（数值+单位），每列设置为该宽度值</view>
					<view>repeat(12, 1fr)（其他字符串），直接使用</view>
					<view>[100px,5px,6px]（字符串数组），从左至右设为数组对应值，单位可为fr</view>
				</view>
			</view>
			<view class="tr">
				<view>ySize</view>
				<view>Array,String</view>
				<view>无</view>
				<view>行高，同上</view>
			</view>
			<view class="tr">
				<view>xSpace</view>
				<view>String</view>
				<view>无</view>
				<view>列间距</view>
			</view>
			<view class="tr">
				<view>ySpace</view>
				<view>String</view>
				<view>无</view>
				<view>行间距</view>
			</view>
			<view class="tr">
				<view>xExtra</view>
				<view>String</view>
				<view>无</view>
				<view>区域外自动列的列宽，默认跟随xSize(数值+单位时有效)</view>
			</view>
			<view class="tr">
				<view>yExtra</view>
				<view>String</view>
				<view>无</view>
				<view>区域外自动行的行高，默认跟随ySize(数值+单位时有效)</view>
			</view>
			<view class="tr">
				<view>xAutoFill</view>
				<view>String</view>
				<view>无</view>
				<view>自动填充，最大适应。xWidth为数值+单位时有效。可选fill(留白)、fit(占满整行)</view>
			</view>
			<view class="tr">
				<view>yAutoFill</view>
				<view>String</view>
				<view>无</view>
				<view>自动填充，最大适应。yWidth为数值+单位时有效。可选fill(留白)、fit(占满整行)</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>direction</view>
					<view>String</view>
					<view>无</view>
					<view>填充顺序</view>
				</view>
				<view class="appendix">
					<view>x，先横向后纵向（默认）</view>
					<view>y，先纵向后横向</view>
					<view>xFull，尽量填满，横向如有空位，且后续项目能填补空位的，拉去填补</view>
					<view>yFull，尽量填满，纵向如有空位，且后续项目能填补空位的，拉去填补</view>
				</view>
			</view>
			<view class="tr">
				<view>xAlign</view>
				<view>String</view>
				<view>无</view>
				<view>单元格内容水平对齐。left(默认)、right、center、full</view>
			</view>
			<view class="tr">
				<view>yAlign</view>
				<view>String</view>
				<view>无</view>
				<view>单元格内容垂直对齐。top(默认)、bottom、center、full</view>
			</view>
			<view class="tr">
				<view>xBerth</view>
				<view>String</view>
				<view>无</view>
				<view>内容区域水平对齐。left(默认)、right、center、full、around、between、evenly</view>
			</view>
			<view class="tr">
				<view>yBerth</view>
				<view>String</view>
				<view>无</view>
				<view>内容区域垂直对齐。top(默认)、bottom、center、full、around、between、evenly</view>
			</view>
			<view class="tr">
				<view>inline</view>
				<view>Boolean</view>
				<view>无</view>
				<view>外框内联</view>
			</view>
		</view>
		
		<view class="bold my-e0p5 fontSize-lg indent">
			grid-item
		</view>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>xStart</view>
				<view>Number</view>
				<view>无</view>
				<view>水平起始位置线，1表示第一列左侧的线</view>
			</view>
			<view class="tr">
				<view>xStart</view>
				<view>Number</view>
				<view>无</view>
				<view>垂直起始位置线，1表示第一行顶部的线</view>
			</view>
			<view class="tr">
				<view>xEnd</view>
				<view>Number</view>
				<view>无</view>
				<view>水平结束位置线，2表示第二列左侧的线（第一列右侧）</view>
			</view>
			<view class="tr">
				<view>yEnd</view>
				<view>Number</view>
				<view>无</view>
				<view>垂直结束位置线，2表示第二行顶部的线（第一行底部）</view>
			</view>
			<view class="tr">
				<view>colspan</view>
				<view>Number</view>
				<view>无</view>
				<view>水平合并列数，坐标优先，start、End其一未设置时有效</view>
			</view>
			<view class="tr">
				<view>rowspan</view>
				<view>Number</view>
				<view>无</view>
				<view>垂直合并行数，坐标优先，start、End其一未设置时有效</view>
			</view>
			<view class="tr">
				<view>xAlign</view>
				<view>String</view>
				<view>无</view>
				<view>内容水平对齐。left、right、center、full</view>
			</view>
			<view class="tr">
				<view>yAlign</view>
				<view>String</view>
				<view>无</view>
				<view>内容垂直对齐。top、bottom、center、full</view>
			</view>
			<view class="tr">
				<view>zIndex</view>
				<view>Number</view>
				<view>无</view>
				<view>堆叠层级</view>
			</view>
		</view>
		
		<view class="p-sm">
			<view class="py-sm">
				<view class="color-error">
					部分平台在渲染自定义组件时存在差异，如微信（可以使用virtualHost配置）/QQ/百度/字节跳动，自定义组件在渲染时会比App/H5端多一级节点，导致父组件样式不能作用在子组件，从而组件失效。grid-item不支持这类平台的使用，若平台无相关配置，则没有兼容的可能。
				</view>
				<view class="color-primary">grid-item组件可使用view标签+补充样式进行代换。</view>
				<view class="color-warning">
					<view>x-start数字：水平起始位置线，预定义1~12</view>
					<view>y-start数字：垂直起始位置线，预定义1~12</view>
					<view>x-end数字：水平结束位置线，预定义1~12</view>
					<view>y-end数字：垂直结束位置线，预定义1~12</view>
					<view>colspan数字：水平合并列数，预定义1~12。与xStart组合使用，与xEnd冲突</view>
					<view>rowspan数字：垂直合并行数，预定义1~12。与yStart组合使用，与yEnd冲突</view>
					<view>span数字：水平与垂直合并，预定义1~12。与xEnd、yEnd冲突</view>
					<view>index数字：层级，预定义1~10</view>
					<view>x-方向：内容水平对齐，可选left、right、center、full</view>
					<view>y-方向：内容垂直对齐，可选top、bottom、center、full</view>
				</view>
				基本使用：
				<view>
					{{'&lt;vi-grid>'}}
					<view class="ml-e2">
						{{'&lt;vi-grid-item>'}}
						<view class="ml-e2">
							内容
						</view>
						{{'&lt;/vi-grid-item>'}}
					</view>
					{{'&lt;/vi-grid>'}}
				</view>
			</view>
			<view class="py-sm">
				<vi-grid :xCount="3" :yCount="2" ySize="2em" yAlign="full" xSpace="0.5em" ySpace="0.5em">
					<view class="bg-default r-sm px-md py-sm">1</view>
					<view class="bg-default r-sm px-md py-sm">2</view>
					<vi-grid-item rowspan="2">
						<view class="bg-warning r-sm px-md py-sm fullY borderbox color-inverse">3</view>
					</vi-grid-item>
					<vi-grid-item colspan="2" rowspan="2">
						<view class="bg-error r-sm px-md py-sm fullY borderbox color-inverse">4</view>
					</vi-grid-item>
					<view class="bg-default r-sm px-md py-sm">5</view>
					<view class="bg-default r-sm px-md py-sm">6</view>
					<view class="bg-default r-sm px-md py-sm span2 x-center y-bottom">样式代换</view>
					<view class="bg-default r-sm px-md py-sm">8</view>
					<view class="bg-default r-sm px-md py-sm">9</view>
				</vi-grid>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.pageContainer{
	
}
</style>
